<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="../css/details.css">

</head>

<body>
    <!-- 回到顶部 -->
    <div class="dingbu" onclick="onBackTop()"><img src="../static/dingbu.png" alt="" class="dbpic"></div>
    <!-- 1头部区域 -->
    <div class="baseHeader">
        <div class="wrapper">
            <!-- 左 -->
            <div class="logo">
                <img src="../static/logo.png" alt="">
            </div>
            <!-- 中 -->
            <div class="search">
                <input type="text" placeholder="搜索商品，发现更多优惠">
                <div class="btn">搜索</div>
            </div>
            <!-- 右 -->
            <ul class="advantage">
                <li><img src="../static/1.png" alt="">
                    <span>全程包邮</span>
                </li>
                <li><img src="../static/2.png" alt="">
                    <span>7天退换</span>
                </li>
                <li><img src="../static/3.png" alt="">
                    <span>品质保证</span>
                </li>
            </ul>

        </div>
    </div>

    <!-- 2导航区域 -->
    <div class="normal">
        <ul class="navbanner">
            <li><a href="../index.html">首页</a></li>

        </ul>
    </div>

    <!-- 3.商品详情大区 -->
    <div class="priduct">
        <div class="container" id="glassone">
            <div class="left">
                <div class="show-box">
                    <div class="mask"></div>
                    <img alt="显示图片" class="showpic">

                </div>
                <ul class="silds">
                    <script type="text/html" id="minipic">
              {{each minpicture}}
                <li >
                    <img src="{{$value.url}}" alt="">
                </li>
                {{/each}}
            </script>
                </ul>

            </div>

            <!-- 中详情 -->

            <div class="details">

                <h1 class="titles">
                    <img src="../static/tbxq.png" alt="" class="pic1">
                    <img src="../static/byxq.png" alt="" class="pic2">
                    <!-- sakose星期香水女士持久淡香 大牌正品口袋小众学生少女清新男士 -->
                </h1>
                <div class="cmd-price">
                    <script type="text/html" id="prices">
                    <p class="original-price"> 原价￥{{price.originPrice}}</p>
                    <div class="last-price">
                        <span class="quan">券后价:</span>
                        <span class="price">￥</span>
                        <span class="singe-price">{{price.price}}</span>
                        <span class="info">{{price.couponValue}}</span>
                        <span class="pepo">{{price.saleNum}}人已买</span>
                    </div>
                </script>
                </div>
              

                <div class="quantity">
                    <label for="">数量：</label>
                    <button class="minus">-</button><input type="text" name="quantity" id="" value="1"><button class="plus">+</button>
                </div>


                <div class="btna">
                    <a href="#" class="left1">加入购物车</a>
                    <a href="./Loginpage.html" class="right1">立即购买</a>
                </div>
            </div>

            <!-- 右边的放大镜框 -->
            <div class="right">
                <img src="" alt="大背景图" class="zxc">
            </div>

            <!-- 最右边 -->
            <div class="shop-info">
<script type="text/html" id="shopInfo">
                <div class="content">
                    <p class="maijia">
                        <img src="../static/yangshixian.png" alt="" class="pic3">
                        <img src="../static/yangshixian.png" alt="" class="pic4">
                        卖家信息
                    </p>

                </div>

                <img src="{{logo.picUrl}}" alt="" class="sakose">

                <p class="shop-name">{{logo.title}}</p>
                <ul class="character">
                    <li>描述</li>
                    <li>服务</li>
                    <li>物流</li>
                </ul>
                <ul class="score">
                    <li>{{logo.itemScore}}</li>
                    <li>{{logo.serviceScore}}</li>
                    <li>{{logo.deliveryScore}}</li>
                </ul>
            <!-- </script> -->
            </div>
       

<!-- 版心 -->
        </div>

    </div>

    <!-- 4.图片介绍区域 -->
    <div class="picture">
        <div class="picture-banner">
            <div class="pic">
                <script type="text/html" id="showPic">
                {{each shears}}
            <img src="{{$value.image.url}}" alt="">
            {{/each}}
            </script>
            </div>

        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <div class="base-footer">
            <img src="../static/logo1.png" alt="" class="img1">
            <h1 class="xmyx">熊猫优选</h1>
            <p class="xiangqing">年轻人网购首选<br>
                购物领券更省钱
            </p>
            <span class="xian">|</span>
            <span class="item">下载APP</span>

            <p class="footer2">
                <img src="../static/policeIcon.png" alt="" class="police-icon">
                浙江安网备案&nbsp;33010602009949&nbsp;|&nbsp;ICP备17012864号:-1&nbsp;|&nbsp;
                <img src="../static/license2.png" alt="" class="police-icon2">
                <span class="xinxi">证照信息</span>

            </p>
        </div>

    </div>

    <!-- aqLogoLRRZT -->
    <div class="aqLogoLRRZT">
        <div class="aqLogo">
            <img src="../static/121.png" alt="">
        </div>
    </div>

    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../lib/template-web.js"></script>
    <script src="../js/details.js"></script>

</body>

</html>